<div class="header">
    <div class="menu-btn">
        <div class="menu"></div>
    </div>
    <h1 class="logo">
        <a href="home.html">
            <span>MYBLOG</span>
            <img src="/img/logo.png">
        </a>
    </h1>
    <div class="nav">
        <a href="/home/home.html">文章</a>
        <a href="/home/whisper.html">微语</a>
        <a href="/home/leacots.html">留言</a>
        <a href="/home/album.html">相册</a>
        <a href="/home/about.html">关于</a>
    </div>
    <ul class="layui-nav header-down-nav">
        <li class="layui-nav-item"><a href="/home/home.html" class="active" >文章</a></li>
        <li class="layui-nav-item"><a href="/home/whisper.html">微语</a></li>
        <li class="layui-nav-item"><a href="/home/leacots.html">留言</a></li>
        <li class="layui-nav-item"><a href="/home/album.html">相册</a></li>
        <li class="layui-nav-item"><a href="/home/about.html">关于</a></li>
    </ul>
    <p class="welcome-text">
        欢迎来到<span class="name">小费</span>的博客 <span class="btn btn-small">退出博客</span>
    </p>
</div>

<script type="text/javascript">
    window.onload = function () {
        /**
         * 初始化默认tab页
         * @type {string}
         */
        const link = location.href
        const nav = document.querySelector(".nav")
        const children = nav.children
        console.log("----------link-----------:",link)
        if (link.includes("home.html")) {
            children[0].classList.add("active")
        } else if(link.includes("whisper.html")){
            children[1].classList.add("active")
        } else if(link.includes("leacots.html")){
            children[2].classList.add("active")
        } else if(link.includes("album.html")){
            children[3].classList.add("active")
        } else if(link.includes("about.html")){
            children[4].classList.add("active")
        } else if(link.includes("details.html")){
            children[0].classList.add("active")
        } else {
            children[0].classList.add("active")
        }
    }
    function changeTab(ev) {
        ev = ev || event
        const target = ev.currentTarget || ev.srcElement
        const parent = target.parentNode
        const children = parent.children
        for (let i = 0,len = children.length; i < len; i++) {
            if (children[i].classList.contains("active")) {
                children[i].classList.remove("active")
            }
        }
        target.classList.add("active")
    }
</script>
